<template>
	<view class="wrap">
		<view class="head_body">
			<view class="head_tab">
				<view :class="['tab_cell', item.id==tabID?'tab_active':'']" v-for="(item,index) in tabList" :key="index" @click="chooseTab(item)">
					{{item.name}}
				</view>
			</view>
			<view class="head_box">
				<view class="head_time" v-if="tabID==1">
					<picker mode="date" fields="month" @change="chooseDate">
						<view class="time">
							{{timeStr}}
						</view>
					</picker>
					<uni-icons type="right" color="#242424" size="17"></uni-icons>
				</view>
				<view class="head_time" v-else>
					<view class="time">
						团队业绩发放记录
					</view>
				</view>
				<view class="head_btn" @click="tixbtn">
					发放业绩奖金
				</view>
			</view>
			
		</view>
		
		<view v-if="tabID==1">
			<view class="person_body" v-if="userList.length">
				<view class="person_cell person_titleBox">
					<view class="person_box person_img">
						人员
					</view>
					<view class="person_box person_num">
						业绩
					</view>
					<view class="person_box person_name">
						提成
					</view>
					<view class="person_box person_level">
						提成比例
					</view>
				</view>
				<uni-collapse ref="collapse1">
					<uni-collapse-item titleBorder="none" v-for="(item,index) in userList" :key="index" :open="true" disabled >
						<template v-slot:title>
							<view class="person_cell">
								<view class="person_box person_img">
									<image :src="item.HeadImgUrl" mode="aspectFill"></image>
									<view class="person_text" style="margin: 4rpx 0;">
										{{item.Name}}
									</view>
									<view class="person_text">
										{{item.UserType}}
									</view>
								</view>
								<view class="person_box person_num">
									{{item.Performance}}
								</view>
								<view class="person_box person_name">
									{{item.Bonus}}
								</view>
								<view class="person_box person_level">
									{{item.BonusRatio}}
								</view>
							</view>
						</template>
						
						
						<view v-if="item.ChildUserSalePerformanceList && item.ChildUserSalePerformanceList.length">
							<view class="person_cell person_second" v-for="(el,i) in item.ChildUserSalePerformanceList" :key="i">
								<!-- <view class="icons">
									<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17482500752841062.png" mode="aspectFill"></image>
								</view> -->
								<view class="person_box person_img">
									<image :src="el.HeadImgUrl" mode="aspectFill"></image>
								</view>
								<view class="person_box person_name">
									{{el.Name}}
								</view>
								<view class="person_box person_level">
									{{el.UserType}}
								</view>
								<view class="person_box person_num">
									{{el.Performance}}
								</view>
							</view>
						</view>
						
					</uni-collapse-item>
				</uni-collapse>
				
			</view>
			<EmptyBox v-else text="暂无数据"></EmptyBox>
		</view>
		
		<view v-if="tabID==2">
			<view class="person_body record_body" v-if="moneyList.length">
				<view class="person_cell person_titleBox">
					<view class="person_box person_img">
						月份
					</view>
					<view class="person_box person_name">
						总业绩
					</view>
					<view class="person_box person_level">
						总提成
					</view>
					<view class="person_box person_num">
						操作
					</view>
				</view>
				<view class="person_cell" v-for="(item,index) in moneyList" :key="index">
					<view class="person_box person_img">
						{{item.SaleMonth}}
					</view>
					<view class="person_box person_name">
						{{item.TotalPerformance}}
					</view>
					<view class="person_box person_level">
						{{item.TotalBonus}}
					</view>
					<view class="person_box person_num">
						<view class="person_btn" @click="nav_to(`/pages/vip/team/teamList?SaleMonth=${item.SaleMonth}`)">
							明细
						</view>
					</view>
				</view>
				
			</view>
			<EmptyBox v-else text="暂无数据"></EmptyBox>
		</view>
		
		
		<uni-popup type="center" ref="signbox" :animation="false">
			<view class="moneybox">
				<view class="moneytext">发放业绩奖金</view>
				
				<view class="money_cell">
					<view class="money_title">
						时 间
					</view>
					<view class="money_inp">
						<picker mode="date" fields="month" @change="chooseSendDate">
								<input type="text" v-model="subParams.SaleMonth" placeholder="请选择时间"/>
						</picker>
					</view>
				</view>
				
				
				
				<view class="confimbtn" @click="Withdrawal">确定</view>
		
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowtime: Number(new Date()),
				timeStr:'',
				userList:[],
				subParams:{
					SaleMonth:''
				},
				tabList:[{name:'当月业绩',id:1},{name:'发放记录',id:2}],
				tabID:1,
				moneyList:[]
			};
		},
		onLoad() {
			let time = this.$util.unixDatetime(this.nowtime, 'yy-mm')
			let year = time.split('-')[0]
			this.timeStr = time
			this.MonthSalePerformance()
			this.SalePerformanceList()
		},
		methods:{
			chooseTab(item){
				this.tabID = item.id
			},
			async SalePerformanceList(){
				let res = await this.$api.post('/SaleChannel/SalePerformanceList')
				if(res.code==0){
					this.moneyList = res.data || []
				}else{
					this.$pv.msg(res.message)
				}
			},
			async MonthSalePerformance(){
				let res = await this.$api.post('/SaleChannel/MonthSalePerformance',{
					SaleMonth:this.timeStr
				})
				if(res.code==0){
					this.userList = res.data || []
				}else{
					this.$pv.msg(res.message)
				}
				this.updateCollapse()
			},
			updateCollapse(){
				this.$nextTick(()=>{
					setTimeout(()=>{
						this.$refs.collapse1.resize()
					},100)
				})
			},
			chooseDate(e){
				this.timeStr = e.detail.value
				this.MonthSalePerformance()
			},
			chooseSendDate(e){
				this.subParams.SaleMonth = e.detail.value
			},
			tixbtn() {
				// this.Money = 0
				this.$refs.signbox.open();
			},
			closePopupSub(){
				this.subParams = {
					SaleMonth:''
				}
				this.$refs.signbox.close();
			},
			async CalSalePerformance(){
				let res = await this.$api.post('/SaleChannel/CalSalePerformance',this.subParams)
				return res
			},
			async Withdrawal() {
				if(!this.subParams.SaleMonth){
					this.$pv.msg('请选择时间');
					return;
				}
				
				uni.showModal({
					title:'提示',
					content:'是否确认操作无误？',
					success: async (rex) => {
						if (rex.confirm) {
							let res1 = await this.CalSalePerformance()
							if (res1.code == 0) {
								this.$pv.msg('发放完成');
								this.closePopupSub()
								this.MonthSalePerformance()
								this.SalePerformanceList()
								this.tabID=2
							} else {
								this.$pv.msg(res1.message);
								
							}
						}
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.wrap{
	.head_body{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		
		background: #FFFFFF;
		
		box-sizing: border-box;
		padding: 20rpx;
		box-shadow: 0 0 8rpx #ccc;
		.head_tab{
			display: flex;
			align-items: center;
			.tab_cell{
				width: 50%;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #999;
				padding: 14rpx ;
				box-sizing: border-box;
			}
			.tab_active{
				color: #5d8bf8;
				position: relative;
				&::after{
					position: absolute;
					content: '';
					left: 50%;
					bottom: -2rpx;
					transform: translate(-50%,0);
					width: 30%;
					height: 6rpx;
					background: #5d8bf8;
					border-radius: 5rpx;
				}
			}
		}
		.head_box{
			margin-top: 20rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.head_time{
				display: flex;
				align-items: center;
				.time{
					margin-right: 8rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
			.head_btn{
				background-color: #5d8bf8;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #fff;
				padding: 12rpx 24rpx;
			}
		}
		
	}
	.person_body{
		margin: 24rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		.person_cell{
			display: flex;
			align-items: center;
			padding: 0 12rpx;
			border-bottom: 2rpx solid #eee;
			// &:last-child{
			// 	border-bottom: 0;
			// }
			.person_box{
				width: 25%;
				min-width: 25%;
				max-width: 25%;
				// height: 100rpx;
				padding: 12rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				word-break: break-all;
				text-align: center;
				font-size: 26rpx;
			}
			.person_img{
				// width: 20%;
				// min-width: 20%;
				// max-width: 20%;
				flex-direction: column;
				image{
					width: 78rpx;
					height: 78rpx;
					border-radius: 8rpx;
				}
			}
			.person_text{
				font-size: 24rpx;
			}
			// .person_num{
			// 	width: 35%;
			// 	min-width: 35%;
			// 	max-width: 35%;
			// }
		}
		.person_second{
			position: relative;
			background-color: #e2e2e2;
			.icons{
				position: absolute;
				top: 0;
				left: 14rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				// width: 20rpx;
				image{
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
		.person_titleBox{
			.person_box{
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}
	
	
	.record_body{
		.person_cell{
			.person_box{
				
			}
			.person_img{
				width: 20%;
				min-width: 20%;
				max-width: 20%;
			}
			.person_name{
				width: 30%;
				min-width: 30%;
				max-width: 30%;
			}
			.person_level{
				width: 30%;
				min-width: 30%;
				max-width: 30%;
			}
			.person_num{
				width: 20%;
				min-width: 20%;
				max-width: 20%;
			}
			.person_btn{
				background-color: #5d8bf8;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #fff;
				width: 120rpx;
				height: 40rpx;
			}
		}
	}
}

.moneybox {
	width: 80vw;
	height: fit-content;
	padding: 32rpx;
	background-color: #fff;
	border-radius: 32rpx;
	
	.money_cell{
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.money_title{
			font-size: 28rpx;
			font-weight: bold;
		}
		.money_inp{
			width: 80%;
			margin-left: 16rpx;
			height: 60rpx;
			picker{
				height: 60rpx;
			}
			input{
				box-sizing: border-box;
				width: 100%;
				height: 60rpx;
				border: 2rpx solid #e4e4e4;
				font-size: 26rpx;
				border-radius: 8rpx;
				padding: 12rpx;
			}
			.input-placeholder {
			  color: #999;
			  font-size: 26rpx;
			}
		}
	}
	
	.summoneybox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 30rpx;

		.summoney {
			font-size: 24rpx;
			color: #999999;
			.sumconmm {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.allbtn {
			width: 120rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
			font-size: 20rpx;
			color: #fff;
			background-color: #5d8bf8;
		}
	}

	.moneytext {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.moneycontent {
		border: 2rpx solid #e4e4e4;
		width: 70%;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding: 20rpx 0;
		line-height: 1;
		> input {
			font: inherit;
			display: block;
			min-height: 0 !important;
			// height: 100%;
		}
	}
	.confimbtn {
		width: 182rpx;
		min-width: 182rpx;
		height: 64rpx;
		background: #5d8bf8;
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
		color: #fff;
		font-size: 28rpx;
		margin: 40rpx auto 20rpx;
	}
	.Tiptext {
		font-size: 24rpx;
		color: #fc4f45;
		text-align: center;
	}
}

::v-deep .uni-collapse-item__title{
	position: relative;
	.uni-collapse-item__title-arrow{
		margin-right: 0;
		position: absolute;
		top: 0%;
		right: 12rpx;
		height: 100%;
		    display: flex;
		    align-items: center;
		// transform: translate(0,-50%) rotate(0);
		text{
			color: #242424 !important;
			font-size: 16px !important;
			opacity: 0;
		}
	}
	.uni-collapse-item__title-arrow-active{
		// transform: translate(0,-50%) rotate(-180deg);
	}
}
</style>
